// import Count from "../../Count";
import Count from "../../Count";
import "./index.scss";

const Foods = ({ food }) => {
  return (
    <dd className="cate-goods">
      <div className="goods-img-wrap">
        {/* <img src={picture} alt="" className="goods-img" /> */}
      </div>
      <div className="goods-info">
        <div className="goods-desc">
          <div className="goods-title">{food.name}</div>
          <div className="goods-detail">
            <div className="goods-unit">{food.unit}</div>
            <div className="goods-detail-text">{food.description}</div>
          </div>
          <div className="goods-tag">{food.food_tag_list.join(" ")}</div>
          <div className="goods-sales-volume">
            <span className="goods-num">月售{food.month_saled}</span>
            <span className="goods-num">{food.like_ratio_desc}</span>
          </div>
        </div>
        <div className="goods-price-count">
          <div className="goods-price">
            <span className="goods-price-unit">¥</span>
            {food.price}
          </div>
          <div className="goods-count">
            <Count food={food}></Count>
          </div>
        </div>
      </div>
    </dd>
  );
};

export default Foods;
